<template>
    <div class="promotion">
        <div class="header">活动</div>
        <div class="nav">限时折扣</div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
                <van-card v-for="item in list" :key="item" num="2" price="2.00" desc="描述信息" title="商品标题"
                    thumb="https://img01.yzcdn.cn/vant/ipad.jpeg" />
            </van-list>
        </van-pull-refresh>

        <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="search" dot>活动</van-tabbar-item>
            <van-tabbar-item icon="friends-o" badge="5">购物车</van-tabbar-item>
            <van-tabbar-item icon="setting-o" badge="20">我的</van-tabbar-item>
        </van-tabbar>

    </div>
</template>

<script>
import Vue from 'vue';
import { NavBar, SwipeCell, Tabbar, TabbarItem, Button, Card, List, Loading, CountDown, PullRefresh } from 'vant';
import { Toast } from 'vant';

Vue.use(SwipeCell);
Vue.use(Button);
Vue.use(NavBar);
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Card);
Vue.use(List);
Vue.use(Loading);
Vue.use(CountDown);
Vue.use(PullRefresh);

export default {
    data () {
        return {
            active: 0,
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
        };
    },
    methods: {
        onLoad () {
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
                duration: 0,

            });
            setTimeout(() => {
                Toast.clear();
                if (this.refreshing) {
                    this.list = [];
                    this.refreshing = false;
                }

                for (let i = 0; i < 10; i++) {
                    this.list.push(this.list.length + 1);
                }
                this.loading = false;

                if (this.list.length >= 30) {
                    this.finished = true;
                }
            }, 1000);
        },
        onRefresh () {


            // 清空列表数据
            this.finished = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/common.scss";

.promotion {
    width: 100%;
    height: 100%;
    background-color: #ccc;
    .header {
        width: 100%;
        height: px2rem(42);
        line-height: px2rem(42);
        background-color: #69c3aa;
        text-align: center;
        color: #fff;
    }
    .nav {
        width: 100%;
        height: px2rem(74);
        line-height: px2rem(74);
        background-color: #fff;
        text-align: center;
        color: #000;
    }
}
</style>